<template>
  <div class="page">
    <div
      class="device-item"
      v-for="item in devices"
      @click="handleConnect(item)"
    >
      <div class="name">{{ item.name }}</div>
      <div class="address">{{ item.deviceId }}</div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import {
  startDiscovery,
  stopDiscovery,
  connect,
} from "@/utils/native-bluetooth.js";
import { onShow, onHide, onUnload } from "@dcloudio/uni-app";

const devices = ref([]);

onShow(() => {
  startDiscovery((item) => {
    devices.value.push(item);
  });
});

onHide(() => {
  console.log("onHide");
  stopDiscovery();
});

onUnload(() => {
  console.log("onUnload");
  stopDiscovery();
});

const handleConnect = (item) => {
  console.log("handleConnect");
  stopDiscovery();
  connect(item.deviceId);
};
</script>
<style lang="scss" scoped>
.page {
  padding: 12px;
}

.device-item {
  margin-bottom: 12px;
  background-color: #fff;
  padding: 12px;
  border-radius: 3px;
}
</style>
